<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>后台登录页面</title>
    <!-- zui -->
    <link href="dist/css/zui.min.css" rel="stylesheet">
</head>

<body>
    <div class="panel" style="margin-bottom: 10px;">
        <div class="panel-heading">
            搜索条件
        </div>
        <div class="panel-body">
            <div class="col-md-4 with-padding">
                <div class="input-group">
                    <span class="input-group-addon">账户</span>
                    <input type="text" class="form-control" placeholder="请输入账户" id="adminName">
                </div>
            </div>
            <div class="col-md-4 with-padding">
                <div class="input-group">
                    <span class="input-group-addon">角色</span>
                    <select class="form-control" id="roleId">
                        <option value="0">请选择</option>
                        <option value="1">普通管理员</option>
                        <option value="2">超级管理员</option>
                    </select>
                </div>
            </div>
            <div class="col-md-4 with-padding">
                <div class="input-group">
                    <span class="input-group-addon">创建时间</span>
                    <input type="date" class="form-control" id="startTime">
                </div>
            </div>
            <div class="col-md-6  with-padding">
                <div class="input-group">
                    <span class="input-group-addon">创建截止时间</span>
                    <input type="date" class="form-control" id="endTime">
                </div>
            </div>

            <div class="col-md-2 with-padding">
                <button class="btn btn-block" type="button" id="searchBtn">搜索</button>
            </div>
            <div class="col-md-2 with-padding">
                <button class="btn btn-block btn-info" type="button" id="addAdmin">新增</button>
            </div>
            <div class="col-md-2 with-padding">
                <button class="btn btn-block btn-danger " type="button" id="reSetBtn">重置</button>
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="panel-heading">
            数据展示
        </div>
        <div class="panel-body">
            <table class="table table-striped table-hover table-bordered">
                <thead>
                    <tr>
                        <th hidden='hidden'>序号</th>
                        <th>账户</th>
                        <th>创建时间</th>
                        <th hidden='hidden'>角色ID</th>
                        <th>角色</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="tableData">
                    <tr>
                        <td>1</td>
                        <td>测试1</td>
                        <td>2020-1-1</td>
                        <td>11</td>
                        <td>普通管理员</td>
                        <td>启用</td>
                        <td>
                            <button class="btn btn-mini " type="button">重置密码</button>
                            <button class="btn btn-mini " type="button">禁用/启用</button>
                            <button class="btn btn-mini " type="button">修改</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- 分页 -->
            <div class="text-center">
                <button class="btn" type="button" id="prePageBtn">上一页</button>
                <span id="pageNumber">1/3</span>
                <button class="btn" type="button" id="nextPageBtn">下一页</button>
            </div>
        </div>
    </div>

    <!-- 弹窗 -->
    <div class="modal fade" id="saveModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title">增加后台用户</h4>
                </div>
                <div class="modal-body">
                    <div class="col-md-12 with-padding">
                        <div class="input-group">
                            <span class="input-group-addon">后台账户</span>
                            <input type="text" class="form-control" id="saveAccount">
                        </div>
                    </div>
                    <div class="col-md-12 with-padding">
                        <div class="input-group">
                            <span class="input-group-addon">密码</span>
                            <input type="text" class="form-control" id="savePwd">
                        </div>
                    </div>
                    <div class="col-md-12 with-padding">
                        <div class="input-group">
                            <span class="input-group-addon">用户状态</span>
                            <select class="form-control" id="saveStateId">
                                <option value="0">请选择</option>
                                <option value="1">启用</option>
                                <option value="2">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12 with-padding">
                        <div class="input-group">
                            <span class="input-group-addon">管理权限</span>
                            <select class="form-control" id="saveRoleId">
                                <option value="0">请选择</option>
                                <option value="1">普通管理员</option>
                                <option value="2">超级管理员</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="saveAdminAjax();">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 重置密码的弹窗 -->
    <div class="modal fade" id="rePwdModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title">修改后台用户密码</h4>
                </div>
                <div class="modal-body">
                    <div class="col-md-12 with-padding">
                        <div class="input-group">
                            <span hidden="hidden" id="rePwdAdminId"></span>
                            <span class="input-group-addon">后台账户</span>
                            <input type="text" class="form-control" disabled='disabled' id="rePwdAccount">
                        </div>
                    </div>
                    <div class="col-md-12 with-padding">
                        <div class="input-group">
                            <span class="input-group-addon">重置的密码</span>
                            <input type="text" class="form-control" id="rePwdPwd">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="updatePwdAjax();">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改admin -->
    <div class="modal fade" id="updateModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title">增加后台用户</h4>
                </div>
                <div class="modal-body">
                    <div class="col-md-12 with-padding">
                        <div class="input-group">
                            <span hidden="hidden" id="updateAdminId"></span>
                            <span class="input-group-addon">后台账户</span>
                            <input type="text" class="form-control" id="updateAccount" disabled='disabled'>
                        </div>
                    </div>
                    <div class="col-md-12 with-padding">
                        <div class="input-group">
                            <span class="input-group-addon">密码</span>
                            <input type="text" class="form-control" id="updatePwd" disabled='disabled'>
                        </div>
                    </div>
                    <div class="col-md-12 with-padding">
                        <div class="input-group">
                            <span class="input-group-addon">用户状态</span>
                            <select class="form-control" id="updateStateId">
                                <option value="1">启用</option>
                                <option value="2">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12 with-padding">
                        <div class="input-group">
                            <span class="input-group-addon">管理权限</span>
                            <select class="form-control" id="updateRoleId">
                                <option value="1">普通管理员</option>
                                <option value="2">超级管理员</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="updateAdminInfo();">保存</button>
                </div>
            </div>
        </div>
    </div>
</body>

<!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
<script src="dist/lib/jquery/jquery-3.4.1.min.js"></script>
<!-- ZUI Javascript组件 -->
<script src="dist/js/zui.min.js"></script>
<!-- layer弹窗JS -->
<script src="layer/layer.js"></script>
<!-- 导入自定义JS -->
<script src="js/admin_mgr.js"></script>

</html>